<template>
  <div>
    <footer :class="{'fixedbottom':bottom}">
      <div class="wrap footer">
        <p>
          <a href>RSS</a> |
          <a href>源码地址</a>
        </p>
        <p>CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。</p>
        <p class="zanzhu">
          服务器赞助商为
          <img width="92" src="https://dn-cnode.qbox.me/FuIpEaM9bvsZKnQ3QfPtBHWQmLM9"> ，存储赞助商为
          <img width="115" src="https://dn-cnode.qbox.me/Fg0jtDIcTqVC049oVu5-sn6Om4NX">，由
          <img
            width="166"
            height="54px;"
            src="https://dn-cnode.qbox.me/FpMZk31PDyxkC8yStmMQL4XroaGD"
          > 提供应用性能服务。
        </p>
        <p>
          新手搭建 Node.js 服务器，推荐使用无需备案的 DigitalOcean(
          <a
            style="color:#005580;"
            href="https://www.digitalocean.com/"
          >https://www.digitalocean.com/</a>)
        </p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "Foot",
  data() {
    return {
      bottom: false
    };
  },
  methods: {},
  created() {
    if (this.$route.path == "/signup" || this.$route.path == "/login") {
      this.bottom = true;
    } else {
      this.bottom = false;
    }
  },
  watch: {
    $route(to) {
      if (to.name == "signup" || to.name == "login") {
        this.bottom = true;
      } else {
        this.bottom = false;
      }
    }
  }
};
</script>

<style scoped>
footer {
  background: #fff;
  width: 100%;
}
footer.fixedbottom {
  position: fixed;
  bottom: 0;
}
footer .footer {
  padding: 20px 0;
  font-size: 0.98rem;
}
footer p {
  line-height: 2rem;
  color: #ababab;
}
footer p a {
  color: #666;
}
footer p a:hover {
  color: #005580;
}
footer .zanzhu img {
  vertical-align: middle;
}
@media (max-width: 768px) {
  footer {
    display: none;
  }
}
</style>
